<script setup>
import { ref, computed ,toRefs} from "vue";
import { useClipboard } from '@vueuse/core'
import { computedAsync } from '@vueuse/core'
import {getMessage} from "../utils/db"

const props = defineProps(["main", "id",'index','row',"total","current"])
const { main, id,index }  = props;
const {row,total,current} = toRefs(props)
// const row = computedAsync(async () => {
//     return await getMessage(data.id);
// })

console.log('user ==========>', props)
// const ids = computed(() => data.list.map(d => d.id))
// const total = computed(() => data.list.length);
// const current = computed(() => data.list.indexOf(id))
const content = computed(() => row.value?.content)
const { copy, copied, isSupported } = useClipboard()
const show = ref(false)
const isEdit = ref(false)
const contentRef = ref();

const value = ref("")
const handleEdit = () => {
    value.value = content.value;
    isEdit.value = true;
}

const handleUpdate = async () => {
    const v = contentRef.value.value;
    if (v != content.value) {
        //
        await main.upChatContent(index, v,row.value)
        const td = await main.prep(row.value.id)
        await main.chat(td)
        // console.log('.........',data,ids.value,current.value,id)
    }
    handleCancel();
}

const handleCancel = () => {
    isEdit.value = false;
    value.value = '';
}

const handleLeft = () => {
    const i = current.value;
    if (i > 0) {
        main.upMsgsId(index, i - 1)
    }
}

const handleRight = () => {
    const i = current.value;
    if (i + 1 < total.value) {
        main.upMsgsId(index, i + 1)
    }
}

</script>

<template>
    <div class="flex flex-row-reverse max-w-full gap-10">
        <!-- 头像 -->
        <div class="p-6 rd-4 h-fit bg-#eee text-24">
            <div class="i-fa6-regular:user"></div>
        </div>
        
        <div class="flex-1 overflow-hidden flex flex-row-reverse gap-10" @mouseenter="show = true"
            @mouseleave="show = false">
            <!-- 消息 -->
            <div :class="['max-w-90% overflow-hidden',{'w-full':isEdit}]">
                <div v-show="!isEdit"
                    class="text-wrap whitespace-break-spaces break-words bg-#93d2f388 box-border p-6 rd-8 text-14">{{
                        content }}
                </div>
                <div v-show="isEdit" class="w-full h-auto p-6 b-2 b-solid b-#93d2f388 box-border rd-8">
                    <textarea ref="contentRef" @input="value = contentRef.value" :value="value"
                        class="resize-none w-full h-full text-16 b-none outline-none c-#666 shadow-none bg-transparent"></textarea>
                </div>
                <div class="flex gap-20 items-center justify-between">
                    <div class="flex items-center gap-5 text-14 p-x-6">
                        <div v-show="copied" class="i-lucide:copy-check c-#67C23A" title="已复制"></div>
                        <div v-show="!copied" class="i-si:copy-duotone  cursor-pointer op-80 hover-op-100" title="复制"
                            @click="isSupported && copy(content)"></div>
                        <div v-show="!isEdit"
                            class="i-iconamoon:edit-duotone c-#409EFF cursor-pointer op-80 hover-op-100" title="编辑"
                            @click="handleEdit"></div>
                        <div v-show="isEdit"
                            class="i-mdi:cancel-box-outline c-#E6A23C cursor-pointer op-80 hover-op-100" title="取消"
                            @click="handleCancel"></div>
                        <div v-show="isEdit"
                            class="i-material-symbols:check-box-outline-rounded c-#67C23A cursor-pointer op-80 hover-op-100"
                            title="确定" @click="handleUpdate"></div>
                    </div>
                    <div v-if="total > 1" class="flex items-center">
                        <div :class="['i-mingcute:left-line c-#666 cursor-pointer op-80 hover-op-100', { 'c-#ddd': current == 0 }]"
                            @click="handleLeft"></div>
                        <div class="text-10 c-#999">{{ current + 1 }} / {{ total }}</div>
                        <div :class="['i-icon-park-outline:right c-#666 cursor-pointer op-80 hover-op-100', { 'c-#ddd': current == total - 1 }]"
                            @click="handleRight"></div>
                    </div>
                    
                </div>

            </div>

        </div>
    </div>
</template>